<template>
  <div>
            <div>
                <div class="hopeTit">相关推荐</div>
                <div class="hopeMain" v-for="(item,index) in hope" :key="index">
                     <router-link :to="{name:'moveDetailed',query:item}">
                   <img :src="item.cover" alt="">
                   <div class="hopeMainleft">
                       <p class="hopeMainTit van-multi-ellipsis--l2">{{item.project_name}}</p>
                       <p class="hopeMainplace van-ellipsis"><span>{{item.tlabel}}</span><span>{{item.city_name}}</span><span>{{item.venue_name}}</span></p>
                       <p class="hopeMainprice">￥ {{item.price_low/100}}</p>
                   </div>
                     </router-link>
                </div>
            </div>
  </div>
</template>

<script>
export default {
props:['hope']
}
</script>

<style>
.hopeTit{
    height: 50px;
    width: 100%;
    padding: 0px 16px;
    line-height: 50px;
    font-size: 18px;
    font-weight: 700;
}
.hopeMain a{
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: start;
    box-shadow: 2px 2px 5px #c5c4c4;
    border-radius: 5px;
    margin-top: 10px;
}
.hopeMain img{
    height: 120px;
    width: 90px;
    border-radius: 5px;
}
.hopeMainleft{
    width: 240px;
    height: 100%;
    margin-left: 12px;
    overflow: hidden;
}
.hopeMainTit{
    font-weight: 700;
    color: #212121;
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 7px;
    height: 40px;
    width: 100%;
}
.hopeMainplace{
    font-size: 12px;
    color: #212121;
    line-height: 18px;
}
.hopeMainplace span{
    margin-left: 5px;
    display: inline-block;
}
.hopeMainprice{
     height: 20px;
    font-size: 18px;
    line-height:20px;
    color:#ff5687;
    margin-top: 30px;
    margin-left: 5px;
}
</style>